﻿@{
    Layout = "_Layout";
}
<div id="app">
    <el-row>
        <el-col :span="24">
            <div class="grid-content bg-purple-dark">
                <el-input v-model="filterRoleName" placeholder="请输入角色名" style="width:300px;" clearable></el-input>
                <el-button type="primary" v-on:click="loadTableData" style="margin-left:10px;width:98px;">搜索</el-button>
                <el-button type="primary" v-on:click="showAdd">添加角色</el-button>
            </div>
        </el-col>
    </el-row>
    <hr class="line-gray" />
    <el-row>
        <div class="table-container">
            <el-table :data="tableData" style="width:100%">
                <el-table-column type="index" width="50" label="编号">

                </el-table-column>
                <el-table-column label="角色名称" width="120" property="name">

                </el-table-column>
                <el-table-column label="权限" width="500" property="modules">
                    <template slot-scope="scope">
                        <span style="color:#909399">{{scope.row.modules.map(item=>item.name).join(',')}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="描述" width="250" property="desc">

                </el-table-column>
                <el-table-column label="类型" width="120" property="type">
                    <template slot-scope="scope">
                        <span v-if="scope.row.type===1" style="color:#909399">机构</span>
                        <span v-else style="color:green">平台</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" v-on:click="edit(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" v-on:click="deleteRole(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </el-row>
    <el-dialog :title="dialogTitle" :visible="addDialogVisible" :close-on-click-modal="false" v-on:close="resetForm" width="500px">
        <el-form :model="role" :label-width="formLabelWidth" ref="roleForm" :rules="rules">
            <el-form-item label="名称" prop="name">
                <el-input v-model="role.name" autocomplete="off" clearable></el-input>
            </el-form-item>
            <el-form-item label="描述" prop="desc">
                <el-input v-model="role.desc" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="权限">
                <el-tree :data="modules"
                         show-checkbox
                         default-expand-all
                         :check-strictly="false"
                         node-key="id"
                         ref="tree"
                         v-on:check="treeSelectedChange"
                         highlight-current
                         href="tree"
                         :props="defaultProps">
                </el-tree>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button v-on:click="addDialogVisible = false">取 消</el-button>
            <el-button type="primary" v-on:click="submit">保存</el-button>
        </div>
    </el-dialog>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            userType: null,  // 用户类型
            insId: null,
            dialogTitle: '',
            filterRoleName: '',
            addDialogVisible: false,
            tableData: [],
            modules: [],
            dialogTitle: '',
            formLabelWidth: '70px',
            role: {
                id: null,
                name: null,
                desc:null,
                modules: [],
                insId: 0,
                type: null  // 角色类型
            },
            rules: {
                name: [
                    { required: true, message: '请输入角色名称', trigger: 'blur' }
                ],
                desc: [
                    { required: true, message: '请输入角色描述', trigger: 'blur' }
                ]
            },
            defaultProps: {
                children: 'children',
                label: 'label'
            }
        },
        methods: {
            // 显示添加对话框
            showAdd() {
                let that = this;
                that.getModules();
                that.addDialogVisible = true;
                that.dialogTitle = "添加角色";
                that.role.id = null;
                that.role.name = null;
                that.role.desc = null;
                that.role.modules = [];
                that.role.insId = that.insId;
                let interval = setInterval(() => {
                    if (that.$refs.tree) {
                        that.$refs.tree.setCheckedKeys(that.role.modules)
                        clearInterval(interval);
                    }
                }, 500)
            },
            submit() {
                let that = this;
                if (that.role.id) {
                    that.editSumit();
                }
                else {
                    that.addSubmit();
                }
            },
            // 提交新建账户
            addSubmit() {
                let that = this;
                that.role.type = that.userType;  // 登录的用户类型，决定创建角色的类型
                that.$refs['roleForm'].validate((valid) => {
                    if (valid) {
                        that.role.modules = that.role.modules.join(',');
                            axios.post("/api/role/add-role-submit", that.role)
                                .then((res) => {
                                    if (res.data.code === 0) {
                                        that.$message({
                                            message: res.data.msg,
                                            type: 'success'
                                        });
                                        that.addDialogVisible = false;
                                        that.loadTableData();
                                    }
                                    else {
                                        that.$message({
                                            message: res.data.msg,
                                            type: 'error'
                                        });
                                    }
                                });
                    }
                })
            },
            editSumit() {
                let that = this;
                //that.getModules()
                that.$refs['roleForm'].validate((valid) => {
                    if (valid) {
                        debugger;
                        that.role.modules = that.role.modules.join(',');
                        axios.post("/api/role/edit-role-submit", that.role)
                            .then((res) => {
                                if (res.data.code === 0) {
                                    that.$message({
                                        message: res.data.msg,
                                        type: 'success'
                                    });
                                    that.resetForm();
                                    that.loadTableData();
                                    
                                }
                                else {
                                    that.$message({
                                        message:res.data.msg,
                                        type:'error'
                                    })
                                }
                            });
                    }
                })
            },
            // 修改
            edit(index, row) {
                // 加载信息，填充 this.instruction对象
                let that = this;
                that.dialogTitle = "编辑角色";
                that.addDialogVisible = true;
                that.getModules();
                that.role.id = row.id;
                that.role.name = row.name;
                that.role.desc = row.desc;
                that.role.type = row.type;
                that.role.modules = row.modules.map(item => item.id);
                that.role.insId = row.insId;
                let interval = setInterval(() => {
                    if (that.$refs.tree) {
                        that.$refs.tree.setCheckedKeys(that.role.modules)
                        clearInterval(interval);
                    }
                },500)
            },
            deleteRole(index, row) {
                var that = this;
                that.$confirm('角色将被删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.get(`/api/role/delete-role?Id=${row.id}`)
                        .then((res) => {
                            if (res.data.code === 0) {
                                that.$message({
                                    message: res.data.msg,
                                    type: 'success'
                                });
                                that.addDialogVisible = false;
                                that.loadTableData();
                            }
                            else{
                                 that.$message({
                                    message: res.data.msg,
                                    type: 'error'
                                });
                            }
                        });
                });
            },
            // 加载表格数据
            loadTableData() {
                let that = this;
                axios.get(`/api/role/get-role-list?insId=${that.insId}&roleName=${that.filterRoleName}&roleType=${that.userType}`)
                    .then((res) => {
                        that.tableData = res.data.data;
                    });
            },
            getModules() {
                let that = this;
                axios.get(`/api/role/get-module-oprions?roleType=${that.userType}`)
                    .then((res) => {
                        that.modules = res.data.data;
                    });
            },
            handleEdit(index, row) {
                this.dialogTitle = "编辑角色";
                this.role.id = row.id;
                // 从api根据id获取角色信息，填充role对象
            },
            resetForm() { // 表单重置
                let that = this;
                that.$refs['roleForm'].resetFields();
                that.addDialogVisible = false;
            },
            treeSelectedChange(val, obj) {
                let that = this;
                that.role.modules = [...obj.checkedKeys, ...obj.halfCheckedKeys];
            }
        },
        created() {
            let that = this;
            that.userType = @ViewBag.UserType;
            if (that.userType === 1) { 
                that.insId= @ViewBag.InsId
            }
            that.loadTableData();
        },
        mounted() {

        }
    });
</script>
<style>

</style>